.body-show {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 92vh;
    .body-bar-hide {
        transform: translateX(-30vh);
    }
    .body-bar {
        background-color: #2c3e50;
        transition: all 0.5s ease;
        width: 22vh;
        border-radius: 0px 20px 20px 0px;
        .bar-ul {
            margin-top: 25px;
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            li {
                background-color: #3498db;
                color: #fffffe;
                padding: 10px;
                margin: 2px;
                width: 80%;
                text-align: center;
                cursor: pointer;
                transition: all 0.3s ease;
                border-radius: 2px;
                &:hover {
                    color: #f1f3f5;
                    background-color: #81aaec;
                }
                a {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            .li-show {
                color: #f1f3f5;
                background-color: #81aaec;
            }
        }
    }
    .body-data {
        flex: 80vh;
    }
}
